<template>
  <div>
    <div>
      <div>订单列表</div><br />
      <!-- 表头 -->
      <div>
        <el-tabs v-model="tj.OrderType" @tab-click="handleClick">
          <el-tab-pane label="全部" name=""></el-tab-pane>
          <el-tab-pane label="待接单" name="1"></el-tab-pane>
          <el-tab-pane label="生产中" name="2"></el-tab-pane>
          <el-tab-pane label="物流中" name="3"></el-tab-pane>
          <el-tab-pane label="已完成" name="4"></el-tab-pane>
        </el-tabs>
      </div>
      <!-- 查询 -->
      <div>
        <el-form label-width="auto" style="width: 100%">
          <el-row>
            <el-col :span="5">
              <el-form-item label="订单编号" aria-placeholder="请输入">
                <el-input v-model="tj.OrderNum" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="状态">
                <el-select v-model="tj.OrderType" placeholder="请选择" style="width: 240px">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-button style="margin-left:30px ; margin-right:10px ;" type="primary" @click="init">查询</el-button>
              <el-button type="primary" @click="clear">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 内容展示 -->
      <div>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="OrderNum" label="订单编号" width="180" />
          <el-table-column prop="OrderAllPrive" label="订单总金额" width="160" />
          <el-table-column prop="CreatTime" label="创建时间" width="160" />
          <el-table-column prop="Status" label="状态" width="120">
            <template #default="scope">
              <span v-if="scope.row.Status == 1">待接单</span>
              <span v-if="scope.row.Status == 2">生产中</span>
              <span v-if="scope.row.Status == 3">物流中</span>
              <span v-if="scope.row.Status == 4">已完成</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" :icon="Edit" title="详情" @click="detail(scope.row)">详情</el-button>
              <el-button v-if="scope.row.Status == 2" type="primary" :icon="Edit" title="生产工序"
                @click="produce(scope.row)">生产工序</el-button>
              <el-button v-if="scope.row.Status == 3" type="primary" :icon="Edit" title="发货信息"
                @click="shipments(scope.row)">发货信息</el-button>
              <el-button v-if="scope.row.Status == 4" type="primary" :icon="Edit" title="投诉建议"
                @click="TS(scope.row)">投诉建议</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"
import { useRouter, useRoute } from 'vue-router'
import { Edit } from "@element-plus/icons-vue";


//定义路由
const router = useRouter()
const route = useRoute()


//数据初始化--查哈寻
function init() {
  //查询接口
}

//接收数据
const tableData = ref([{
  OrderNum: "10086",
  OrderAllPrive: "236781",
  CreatTime: "xxxx-xx-xx",
  Status: "2",
},
{
  OrderNum: "10086",
  OrderAllPrive: "236781",
  CreatTime: "xxxx-xx-xx",
  Status: "1",
}, {
  OrderNum: "10086",
  OrderAllPrive: "236781",
  CreatTime: "xxxx-xx-xx",
  Status: "3",
}, {
  OrderNum: "10086",
  OrderAllPrive: "236781",
  CreatTime: "xxxx-xx-xx",
  Status: "4",
}])

//条件
const tj = ref({
  OrderNum: "",
  OrderType: "",
})
//重置条件
function clear() {
  tj.value = {
    OrderNum: "",
    OrderType: "",
  }
}

//下拉列表
const options = [
  { label: "接单中", value: "1" },
  { label: "生产中", value: "2" },
  { label: "物流中", value: "3" },
  { label: "已完成", value: "4" },
]

//点击表头触发
function handleClick() {
  console.log("点击了")
}

//按钮--进行页面跳转
function detail(row) {
  console.log(row)
  router.push({ name: "OrderDetail" })
}
function produce(row) {
  console.log(row)
  router.push({ name: "ProductionProcess" })
}
function shipments(row) {
  console.log(row)
  router.push({ name: "Shipments" })
}
function TS(row) {
  console.log(row)
  router.push({ name: "TS" })
}



</script>

<style scoped>
/* 垂直标签栏固定宽度 */
.vertical-tabs {
  width: 200px;
}

/* 标签项自定义样式 */
:deep(.el-tabs__item) {
  width: 100%;
  padding: 20px !important;
  transition: background 0.3s;
}
</style>
